﻿@using ZR.CodeGenerator
@* @model ZR.CodeGenerator.Model.GenerateDto; *@
@{
    var genTable = Model.GenTable;
    var subTableOptions = Model.SubTableOptions;
    var options = Model.GenOptions;
    var replaceDto = Model.ReplaceDto;
}
<template>
  <view class="edit-wrap">
    <view class="edit-form">
    <u-form labelPosition="left" :model="form" labelWidth="90px" :rules="rules" ref="uForm">
@foreach(var column in genTable.Columns)
{
    var columnName = column.CsharpFieldFl;
    var value = "item.value";
    var number = "";
    var labelName = column.FieldDesc;
    if(column.CsharpType == "int" || column.CsharpType == "long")
    {
        value = "parseInt(item.value)";
        number = ".number";
    }

    if(column.IsPk || column.IsIncrement)
    {
        if(column.IsPk && column.IsIncrement == false && replaceDto.UseSnowflakeId == false)
        {
      <u-form-item label="@(labelName)" prop="@(columnName)">
        <u--input type="number" v-model.number="form.@(columnName)" placeholder="请输入@(labelName)" :disabled="opertype != 1"></u--input>
      </u-form-item>
        }
        else
        {
      <u-form-item label="@(labelName)" prop="@(columnName)" v-if="opertype != 1">
        <u--input type="number" v-model.number="form.@(columnName)" placeholder="请输入@(labelName)" :disabled="true"/>
      </u-form-item>
        }
    }
    else
    {
        if(column.HtmlType == "radio" || column.HtmlType == "selectRadio")
        {
      @:<u-form-item label="@(labelName)" prop="@(columnName)">
            @:<u-radio-group v-model="form.@(columnName)">
            @:<u-radio v-for="item in @(column.DictType != "" ? $"dict.type.{column.DictType}" : $"{column.CsharpFieldFl}Options") :name="@(value)" class="margin-right-xl">{{item.label}}</u-radio>
        @:</u-radio-group>
      @:</u-form-item>
        }
        else if(column.HtmlType == "checkbox")
        {
      <u-form-item label="@(labelName)" prop="@(columnName)">
            <u-checkbox-group v-model="form.@(columnName)Checked">
              <u-checkbox :customStyle="{marginRight: '20px', marginBottom: '15px')" v-for="(item, index) in @(column.DictType != ""?$"dict.type.{column.DictType}":$"{column.CsharpFieldFl}Options") :key="index"
                :label="item.label" :name="@(value)">
              </u-checkbox>
            </u-checkbox-group>
      </u-form-item>
        }
        else if(column.HtmlType == "inputNumber" || column.HtmlType == "customInput")
        {
      <u-form-item label="@(labelName)" prop="@(columnName)">
        <u-number-box v-model="form.@(columnName)"></u-number-box>
      </u-form-item>
        }
        else if(column.HtmlType == "datetime" || column.HtmlType == "month")
        {
      <u-form-item label="@(labelName)" prop="@(columnName)">
        <uni-datetime-picker v-model="form.@(columnName)" />
      </u-form-item>
        }
        else if(column.HtmlType == "textarea")
        {
      <u-form-item label="@(labelName)" prop="@(columnName)">
        <u--textarea v-model="form.@(columnName)" placeholder="请输入内容" count ></u--textarea>
      </u-form-item>
        }
        else if(column.HtmlType == "imageUpload" || column.HtmlType == "fileUpload")
        {
      <u-form-item label="@(labelName)" prop="@(columnName)">
        <uploadImage v-model="form.@(columnName)"></uploadImage>
      </u-form-item>
        }
        else if(column.HtmlType == "select" || column.HtmlType == "selectMulti")
        {
      <u-form-item label="@(labelName)" prop="@(columnName)">
        <uni-data-select v-model="form.@(columnName)" :clear="true" :localdata="@(column.DictType != ""?$"dict.type.{column.DictType}":$"{column.CsharpFieldFl}Options")
          format="{label} - {value)"></uni-data-select>
      </u-form-item>
        }
        else
        {
      <u-form-item label="@(labelName)" prop="@(columnName)">
        <u--input v-model@(number)="form.@(columnName)" placeholder="请输入@(labelName)" @(column.DisabledStr)/>
      </u-form-item>
        }
    }
}

      </u-form>
    </view>

    <view class="form-footer">
      <view class="btn_wrap">
        <view class="btn-item">
          <u-button text="取消" shape="circle" type="info" @@click="handleCancel"></u-button>
        </view>
        <view class="btn-item" v-if="opertype != 3">
          <u-button text="确定" shape="circle" type="primary" @@click="submit"></u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    get@(genTable.FunctionCode),
@if(replaceDto.ShowBtnAdd) 
{
    @:add@(genTable.FunctionCode),
}
@if(replaceDto.ShowBtnEdit) 
{
    @:update@(genTable.FunctionCode),
}
  } from '@@/api/@(CodeGeneratorTool.FirstLowerCase(genTable.ModuleCode))/@(genTable.FunctionCode.ToLower()).js'

  export default {
    dicts: [
@foreach(var item in genTable.Columns)
{
    if((item.HtmlType == "radio" || item.HtmlType.Contains("select") || item.HtmlType == "checkbox") && item.DictType != "")
    {
      @:"@(item.DictType)",
    }
}
    ],
    data() {
      return {
        form: {
@foreach(var item in genTable.Columns)
{
    if(item.HtmlType == "checkbox")
    {
          @:@(item.CsharpFieldFl)Checked: [],
    }
    else
    {
          @:@item.CsharpFieldFl: undefined,
    }
}
        },
        rules: {
@foreach(var column in genTable.Columns)
{
    if(column.IsRequired && column.IsIncrement == false)
    {
          @:@(column.CsharpFieldFl): [{
            @:required: true, 
            @:message: "@(column.FieldDesc)不能为空", 
            @:trigger: [ 'change', 'blur' ],
@((column.CsharpType == "int" || column.CsharpType == "long")?"            type: \"number\"}":"") 
          @:}],
    }
}
        },
        opertype: 0,
@foreach(var item in genTable.Columns)
{
    if((item.HtmlType == "radio" || item.HtmlType == "select" || item.HtmlType == "checkbox") && item.DictType == "")
    {
        @:// @(item.FieldDesc)选项列表 格式 eg:{ label: '标签', value: '0'}
        @:@(item.CsharpFieldFl)Options: [],
    }
}
      }
    },
    onReady() {
      // 需要在onReady中设置规则
      setTimeout(() => {
        this.$refs.uForm.setRules(this.rules)
      }, 300)
    },
    onLoad(e) {
      this.opertype = e.opertype
      if (e.id) {
        get@(genTable.FunctionCode)(e.id).then(res => {
          const {
            code,
            data
          } = res
          if (code == 200) {
            this.form = {
              ...data,
              @foreach(var item in genTable.Columns)
              {
                if(item.HtmlType == "checkbox")
                {
              @:@(item.CsharpFieldFl)Checked: data.@(item.CsharpFieldFl) ? data.@(item.CsharpFieldFl).split(',') : [],
                }
              }
            }
          }
        })
      } else {
        this.reset()
      }
    },
    methods: {
      reset(){
      this.form = {
@foreach(var item in genTable.Columns)
{
    if((item.HtmlType == "checkbox"))
    {
        @:@(item.CsharpFieldFl)Checked: [],
    }
    else
    {
        @:@item.CsharpFieldFl: undefined,
    }
}
      };
    },
      submit() {
        this.$refs.uForm.validate().then(res => {
          this.$modal.msg('表单校验通过')

          @foreach(var item in genTable.Columns)
          {
            if(item.HtmlType == "checkbox")
            {
          @:this.form.@(item.CsharpFieldFl) = this.form.@(item.CsharpFieldFl)Checked.toString();
            }
          }
          if (this.form.@(replaceDto.FistLowerPk) != undefined && this.opertype == 2) {
            update@(genTable.FunctionCode)(this.form).then((res) => {
                this.$modal.msgSuccess("修改成功")
            })
          } else {
            add@(genTable.FunctionCode)(this.form).then((res) => {
                this.$modal.msgSuccess("新增成功")
              })
          }
        }).catch(errors => {
          this.$modal.msg('表单校验失败')
        })
      },
      handleCancel() {
        uni.navigateBack()
      }
    }
  }
</script>

<style lang="scss" scoped>
  @@import "@@/static/scss/page.scss";
  .btn-wrap {
    margin: 150rpx auto 0 auto;
    width: 80%
  }
</style>